<template>
  <div class="ex-pictures" v-if="imgObj && imgObj.resourceUrl">
    <div class="ep-title">
      {{ title }}
    </div>
    <div class="ep-des">
      {{ des }}
    </div>
    <!-- <Transition name="slide-fade" @after-leave="onAfterLeave"> -->
    <div class="ep-content" v-if="show">
      <div class="epc-card">
        <div class="epc-img">
          <img :src="imgObj.resourceUrl" alt="logo" @click="dialogVisible = true">
        </div>
      </div>
    </div>
    <div class="ep-content">
      <div class="epc-feature-card" v-for="(item,index) in key">
        <p class="epc-feature-card-name">{{item.parameter}}</p>
        <p class="epc-feature-card-number">{{item.value}}
                    <span class="epc-feature-card-unit">{{item.unit}}</span>
        </p>
      </div>
<!--      <div class="epc-feature-card">-->
<!--        <p class="epc-feature-card-name">Seat Capacity</p>-->
<!--        <p class="epc-feature-card-number">6/7</p>-->
<!--      </div>-->
<!--      <div class="epc-feature-card">-->
<!--        <p class="epc-feature-card-name">Engine</p>-->
<!--        <p class="epc-feature-card-number">2.0-->
<!--          <span class="epc-feature-card-unit">T</span>-->
<!--        </p>-->

<!--      </div>-->
<!--      <div class="epc-feature-card">-->
<!--        <p class="epc-feature-card-name">Transmission</p>-->
<!--        <div class="epc-feature-card-number">8-->
<!--          <span class="epc-feature-card-unit">AT</span>-->
<!--        </div>-->

<!--      </div>-->
    </div>
  </div>
  <div class="dialogContent">
    <el-dialog v-model="dialogVisible" :show-close=false :destroy-on-close=true>
      <ImageDetail :picUrl="imgObj.resourceUrl"
                   :hqPicUrl="imgObj.hqResourceUrl"
                   :des="imgObj.des"
                   :title="imgObj.title"
                   :publishTime="imgObj.publishTime"></ImageDetail>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import {ref} from 'vue'

let show = ref(true);

const picUrl = ref("")

const props = defineProps({
  title: {
    type: String,
    required: false,
  },
  img: {
    type: Object,
    required: false,
  },
  des: {
    type: Object,
    required: false,
  },
  keyPoint: {
    type: Array,
    required: false,
  },
});

const dialogVisible = ref(false)

const imgObj = ref(props.img)
const des = ref(props.des ? props.des : ``)
const title = ref(props.title ? props.title : ``)
const key = ref(props.keyPoint ? props.keyPoint : [])
// console.log(props.keyPoint )

</script>
<style scoped lang="scss">
.dialogContent {
  :deep(.el-dialog) {
    width: 1024px;
    padding: 0px;
  }

  :deep(.el-dialog__header) {
    display: none;
  }

  :deep(.el-dialog__footer) {
    padding: 10px;
    padding-left: 32px;

  }


  .dialogVideoContent img {
    width: 1024px;
  }

  .detailContent {
    width: 1024px;
    padding: 10px 30px;


    .detailContent-left {
      width: 900px;
      display: inline-block;
      padding: 10px;

      .dialog-title {
        line-height: 32px;
        font-size: 22px;
        color: #000;
        // margin-top: 12px;
        font-weight: 600;

      }

      .dialog-dsc {
        line-height: 22px;
        color: #000;
        font-size: 100%;

      }

      .dialog-date {
        margin-top: 12px;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.25);
      }
    }

    .detailContent-right {
      width: 50px;
      display: inline-block;

      .emc-btn {
        width: 32px;
        height: 32px;
        background-image: url('/src/assets/images/home/组23@2x.png');
        background-size: cover;
        border: 2px dashed rgba(0, 0, 0, 0.2);
        cursor: pointer;
        transition: background-color .3s;
      }
    }

  }

}

.ex-pictures {
  position: relative;
  padding: 104px 160px;
  background: #fff;
  width: 1600px;
  padding-bottom: 100px;
  background-image: linear-gradient(rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0) 50%,
      rgba(199, 142, 102, 0.2) 50%,
      rgba(199, 142, 102, 0.1) 67%,
      rgba(199, 142, 102, 0) 100%);

  .ep-title {
    width: 100%;
    // text-align: center;
    font-size: 32px;
    color: #30363A;
    margin-top: 104px;
  }

  .ep-des {
    width: 100%;
    // text-align: center;
    font-size: 16px;
    line-height: 24px;
    margin-top: 40px;

  }

  .ep-content {
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
    // margin-bottom: 10px;
    margin-top: 64px;

    .epc-card {
      cursor: pointer;
      overflow: hidden;

      .epc-img {
        width: 1586px;
        //height: 864px;
        background-color: rgb(202, 201, 201);

        img {
          width: 1586px;
          //height: 864px;
          object-fit: cover;
          transition: all 0.6s;
        }
      }


    }

    .epc-card:hover .epc-img img {
      transform: scale(1.05);
    }

    .epc-feature-card {
      width: 351px;
      height: 176px;
      border-bottom: 2px solid rgba(0, 0, 0, 0.15);
      // margin-right: 55px;


      .epc-feature-card-name {
        font-size: 16px;
        height: 18px;
      }

      .epc-feature-card-number {
        margin-top: 60px;
        font-size: 48px;
        font-weight: 400;
        color: #C78E66;
        line-height: 112px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      .epc-feature-card-unit {
        font-weight: 400;
        font-size: 16px;
        color: #C78E66;
        line-height: 112px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }

  }

  .pagination-box {
    position: absolute;
    right: 160px;
    bottom: 100px;
  }
}

.em-more-btn {
  margin-top: 65px;
  width: 296px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background: rgb(199, 142, 102, 0.08);
  border-bottom: 4px solid #C78E66;
  color: #000000;
  cursor: pointer;
  transition: background-color .3s;
  font-size: 16px;
}

.em-more-btn:hover {
  background-color: rgb(199, 142, 102, 0.38);
}


.slide-fade-enter-active {
  transition-delay: 1s;
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>
